<template>
  <view class="container">
    <!-- 订单状态 -->
    <view class="status-section">
      <view class="status-info">
        <text class="status-text" :class="getStatusClass(order.status)">{{ getStatusText(order.status) }}</text>
        <text class="status-desc" v-if="order.status === 3">商家进度：{{ order.merchantProcessText }}</text>
        <text class="status-desc" v-if="order.status === 3 && order.deliveryType === 1">配送进度：{{ order.deliveryProcessText }}</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-item">
        <text class="info-label">订单编号：</text>
        <text class="info-value">{{ order.id }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">下单时间：</text>
        <text class="info-value">{{ order.createTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">订单金额：</text>
        <text class="info-value">¥{{ order.totalPrice }}</text>
      </view>
      <view class="info-item" v-if="order.deliveryFee > 0">
        <text class="info-label">配送费：</text>
        <text class="info-value">¥{{ order.deliveryFee }}</text>
      </view>
      <view class="info-item" v-if="order.totalPackagingFee > 0">
        <text class="info-label">打包费：</text>
        <text class="info-value">¥{{ order.totalPackagingFee }}</text>
      </view>
      <view class="info-item" v-if="order.discount > 0">
        <text class="info-label">优惠金额：</text>
        <text class="info-value">¥{{ order.discount }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">实付金额：</text>
        <text class="info-value">¥{{ order.actualPay }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">配送类型：</text>
        <text class="info-value">{{ getDeliveryTypeText(order.deliveryType) }}</text>
      </view>
      <view class="info-item" v-if="order.deliveryAddress">
        <text class="info-label">配送地址：</text>
        <text class="info-value">{{ order.deliveryAddress }}</text>
      </view>
      <view class="info-item" v-if="order.remark">
        <text class="info-label">备注：</text>
        <text class="info-value">{{ order.remark }}</text>
      </view>
      <view class="info-item" v-if="order.deliveryType === 1">
        <text class="info-label">预约送达时间：</text>
        <text class="info-value">{{ order.deliveryTimeType === 1 ? '尽快送达' : order.scheduleTime }}</text>
      </view>
      <view class="info-item" v-if="order.pointsUsed > 0">
        <text class="info-label">使用积分：</text>
        <text class="info-value">{{ order.pointsUsed }}</text>
      </view>
      <view class="info-item" v-if="order.pointsDiscount > 0">
        <text class="info-label">积分抵扣：</text>
        <text class="info-value">¥{{ order.pointsDiscount }}</text>
      </view>
      <view class="info-item" v-if="order.paymentMethod">
        <text class="info-label">支付方式：</text>
        <text class="info-value">{{ order.paymentMethod.name }}</text>
      </view>
      <view class="info-item" v-if="order.coupon">
        <text class="info-label">使用优惠券：</text>
        <text class="info-value">{{ order.coupon.name }} ({{ order.coupon.type === 1 ? '满减券' : '折扣券' }}: {{ order.coupon.type === 1 ? '¥' + order.coupon.value : order.coupon.discount + '折' }})</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="goods-list">
      <view class="section-title">商品信息</view>
      <view class="goods-item" v-for="(item, index) in order.goods" :key="index">
        <image class="goods-image" :src="item.image" mode="aspectFill"></image>
        <view class="goods-detail">
          <view class="goods-name-info">
            <text class="goods-name">{{ item.name }}</text>
            <text class="goods-spec" v-if="item.specifications">{{ formatSpecifications(item.specifications) }}</text>
          </view>
          <view class="goods-price-info">
            <text class="goods-quantity">x{{ item.quantity }}</text>
            <text class="goods-price">¥{{ item.price }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons" v-if="order.status === 2 || order.status === 3">
      <button v-if="order.status === 3 && order.merchantProcess === 1" class="finish-meal-btn" @click="handleFinishMeal">出餐</button>
      <button v-if="order.customerPhone" class="contact-btn" @click="handleContactCustomer">联系顾客</button>
      <button v-if="order.deliveryPhone" class="contact-btn" @click="handleContactDelivery">联系配送员</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getOrderDetail, finishMeal } from '@/api/order';

const order = ref({});

const formatSpecifications = (specsStr) => {
  try {
    const specs = JSON.parse(specsStr);
    if (!Array.isArray(specs)) return specsStr;
    return specs.map(spec => spec.value).join(',');
  } catch (e) {
    return specsStr;
  }
};

const getStatusText = (status) => {
  const statusMap = {
    2: '待处理',
    3: '进行中',
    4: '已完成'
  };
  return statusMap[status] || '未知状态';
};

const getStatusClass = (status) => {
  const statusClassMap = {
    2: 'status-pending',
    3: 'status-processing',
    4: 'status-completed'
  };
  return statusClassMap[status] || '';
};

// const getStatusDesc = (status) => {
//   const descMap = {
//     2: '等待商家接单',
//     3: '订单正在处理中',
//     4: '订单已完成'
//   };
//   return descMap[status] || '';
// };

const getDeliveryTypeText = (type) => {
  const typeMap = {
    1: '外卖配送',
    2: '堂食',
    3: '自取'
  };
  return typeMap[type] || '未知配送方式';
};

const handleContactCustomer = () => {
  uni.makePhoneCall({
    phoneNumber: order.value.customerPhone
  });
}

const handleContactDelivery = () => {
  uni.makePhoneCall({
    phoneNumber: order.value.deliveryPhone
  });
};

const handleFinishMeal = async () => {
  uni.showModal({
    title: '确认出餐',
    content: '确定要出餐吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await finishMeal(order.value.id);
          uni.showToast({ title: '出餐成功', icon: 'success' });
          // 重新获取订单详情
          const result = await getOrderDetail(order.value.id);
          order.value = result.data || {};
        } catch (e) {
          uni.showToast({ title: '出餐失败', icon: 'none' });
        }
      }
    }
  });
};

onLoad(async (options) => {
  const orderId = options.id;
  try {
    const res = await getOrderDetail(orderId);
    order.value = res.data || {};
  } catch (error) {
    console.error('获取订单详情失败:', error);
  }
});
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fafafa;
  padding: 24rpx;
}

.status-section {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 36rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
}

.status-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-text {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 12rpx;

  &.status-pending {
    color: #ff8c00;
  }

  &.status-processing {
    color: #1989fa;
  }

  &.status-completed {
    color: #323233;
  }
}

.status-desc {
  font-size: 26rpx;
  color: #666;
}

.order-info {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  font-size: 28rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  color: #999;
}

.info-value {
  color: #333;
  font-weight: 500;
}

.goods-list {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  padding-bottom: 12rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.goods-item {
  display: flex;
  margin-bottom: 24rpx;
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #f5f5f5;

  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.goods-image {
  width: 120rpx;
  height: 90rpx;
  border-radius: 16rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  object-fit: cover;
}

.goods-detail {
  flex: 1;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.goods-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.goods-spec {
  font-size: 24rpx;
  color: #999;
  background-color: #f9f9f9;
  padding: 4rpx 10rpx;
  border-radius: 8rpx;
  display: inline-block;
}

.goods-price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.goods-price {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 24rpx 24rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
}

button {
  width: 40%;
  padding: 12rpx 28rpx;
  font-size: 26rpx;
  border-radius: 28rpx;
  line-height: 1.4;
  margin: 0;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.contact-btn {
  background-color: #fff;
  border: 1px solid #1989fa;
  color: #1989fa;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(25, 137, 250, 0.1);

  &:active {
    background-color: rgba(25, 137, 250, 0.05);
  }
}

.finish-meal-btn {
  color: #fff;
  background: linear-gradient(to right, #ff9a9e, #ff6b6b);
  border: none;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);

  &:active {
    transform: scale(0.95);
  }
}
</style>